<template>
    <div>
        <el-dialog title="回答问题" :visible.sync="replyVisible" width="980px" :before-close="close" custom-class="replyDialog" @open="open">
            <el-tabs v-model="activeName">
                <el-tab-pane label="选择相似问题答案" name="familiarAnswer"></el-tab-pane>
                <el-tab-pane label="选择已有答案" name="existAnswer"></el-tab-pane>
                <el-tab-pane label="编辑答案" name="editAnswer"></el-tab-pane>
            </el-tabs>
            <div v-show="activeName == 'familiarAnswer' || activeName == 'existAnswer'" class="replyFlex">
                <knowledgeTree @getClassId="getClassId" type="class" ref="knowledgeTree" :canEdit="false"></knowledgeTree>
                <div v-show="activeName == 'familiarAnswer'" class="replayContent">
                    <el-input v-model="qsKeyword" placeholder="请输入关键字搜索" size="small" style="width:300px;margin-bottom: 20px">
                        <span slot="suffix" class="iconfont icon-sousuo" @click="qsFilterList"></span>
                    </el-input>
                    <element-table :data="qsList" :columns="qsCloumns" :loading="qstableLoading" :tableHeight="tableHeight"
                                   :pageNo="qsPageNo" :pageSize="qsPageSize" :total="qsTotal" @changePageNo="qsChangePageNo"
                                   @changePageSize="qsChangePageSize" @changeSelect="qsChangeSelect" :pagFixed="false" isNeedSelect
                                   isSingleSelect>
                    </element-table>
                </div>
                <div v-show="activeName == 'existAnswer'" class="replayContent">
                    <el-input v-model="ansKeyword" placeholder="请输入关键字搜索" size="small" style="width:300px;margin-bottom: 20px">
                        <span slot="suffix" class="iconfont icon-sousuo" @click="ansFilterList"></span>
                    </el-input>
                    <element-table :data="ansList" :columns="ansCloumns" :loading="ansTableLoading" :tableHeight="tableHeight"
                                   :pageNo="ansPageNo" :pageSize="ansPageSize" :total="ansTotal" @changePageNo="ansChangePageNo"
                                   @changePageSize="ansChangePageSize" @changeSelect="ansChangeSelect" :pagFixed="false" isNeedSelect
                                   isSingleSelect>
                    </element-table>
                </div>
            </div>
            <div v-show="activeName == 'editAnswer'">
                <knowledge-question @showDialogueList="showDialogueList" :answeringQuestion="answeringQuestion" ref="knowledgeQuestion">
                </knowledge-question>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close" size="small" type="text">取消</el-button>
                <el-button @click="reply" type="primary" size="small">回答</el-button>
            </span>
        </el-dialog>

        <select-dialogue :selectDialogueVisible.sync="selectDialogueVisible" @chooseDialogue="chooseDialogue" ref="similarQuestionDialog">
        </select-dialogue>
    </div>
</template>

<script>
import knowledgeTree from "@/components/knowledgeTree";
import elementTable from "@/components/elementTable";
import knowledgeQuestion from "@/components/knowledgeQuestion/index.vue";
import selectDialogue from "@/views/robotKnowledge/knowledge/faqManage/selectDialogue.vue";
import { getQueList, getAnsList, addQuestion } from "@/api/knowledge.js";
export default {
    name: "replyQuestion",
    props: {
        replyVisible: Boolean,
        answeringQuestion: String,
    },
    data() {
        return {
            tableHeight: 355,
            activeName: "familiarAnswer",
            classId: "",
            qstableLoading: false,
            qsKeyword: "",
            qsList: [],
            qsPageNo: 1,
            qsPageSize: 10,
            qsTotal: 0,
            qsSelect: [],
            qsCloumns: [
                {
                    config: {
                        label: "问题",
                        prop: "question",
                    }
                },
            ],
            ansTableLoading: false,
            ansKeyword: "",
            ansList: [],
            ansPageNo: 1,
            ansPageSize: 10,
            ansTotal: 0,
            ansSelect: [],
            ansCloumns: [
                {
                    config: {
                        label: "答案",
                    },
                    render: (h, scope) => {
                        return (
                            <span domPropsInnerHTML={scope.answer}></span>
                        );
                    },
                },
            ],
            selectDialogueVisible: false,
        }
    },
    methods: {
        open() {
            this.qsPageNo = 1;
            this.qsKeyword = "";
            this.getQueList();
            this.ansPageNo = 1;
            this.ansKeyword = "";
            this.getAnsList();
        },
        getClassId(id) {
            this.classId = id;
            this.qsPageNo = 1;
            this.getQueList();
            this.ansPageNo = 1;
            this.getAnsList();
        },
        qsFilterList() {
            this.qsPageNo = 1;
            this.getQueList();
        },
        getQueList() {
            var param = {
                keywordType: "question",
                keyword: this.qsKeyword,
                classId: this.classId != "0" ? this.classId : "",
                pageNo: this.qsPageNo,
                pageSize: this.qsPageSize,
            }
            this.qstableLoading = true;
            getQueList(param).then(resp => {
                this.qstableLoading = false;
                if (resp.status == 0) {
                    this.qsTotal = resp.data.total;
                    this.qsList = resp.data.questionList || [];
                }
            });
        },
        ansFilterList() {
            this.ansPageNo = 1;
            this.getAnsList();
        },
        getAnsList() {
            var param = {
                pageNo: this.ansPageNo,
                pageSize: this.ansPageSize,
                classId: this.classId != "0" ? this.classId : "",
                keyword: this.ansKeyword
            };
            this.ansTableLoading = true;
            getAnsList(param).then((resp) => {
                this.ansTableLoading = false;
                if (resp.status == 0) {
                    this.ansTotal = resp.data.total;
                    this.ansList = resp.data.list || [];
                }
            });
        },
        reply() {
            if (this.activeName == "familiarAnswer") {
                if (this.qsSelect.length > 0) {
                    this.$emit('getSelectedAnswer', this.qsSelect[0].id);
                } else {
                    this.$antMessage.warning("请选择一个问题回答");
                }
            } else if (this.activeName == "existAnswer") {
                if (this.ansSelect.length > 0) {
                    this.$emit('getSelectedAnswer', this.ansSelect[0].questionId);
                } else {
                    this.$antMessage.warning("请选择一个问题回答");
                }
            } else {
                var data = this.$refs.knowledgeQuestion.getFromData();
                if (data) {
                    data.fromSource = 1;
                    addQuestion(data).then((resp) => {
                        if (resp.status == 0) {
                            this.close();
                            this.$emit('finishAnswer');
                        } else {
                            this.$antMessage.warning(resp.message);
                        }
                    });
                }
            }
        },
        close() {
            this.activeName = "familiarAnswer";
            this.$refs.knowledgeQuestion.clearFromData();
            this.$emit("update:replyVisible", false);
        },
        qsChangePageNo(val) {
            this.qsPageNo = val;
            this.getQueList();
        },
        qsChangePageSize(val) {
            this.qsPageSize = val;
            this.getQueList();
        },
        qsChangeSelect(val) {
            this.qsSelect = val;
        },
        ansChangePageNo(val) {
            this.ansPageNo = val;
            this.getAnsList();
        },
        ansChangePageSize(val) {
            this.ansPageSize = val;
            this.getAnsList();
        },
        ansChangeSelect(val) {
            this.ansSelect = val;
        },
        showDialogueList() {
            this.selectDialogueVisible = true
        },
        chooseDialogue(data) {
            this.$refs.knowledgeQuestion.setDialogue(data);
        },
    },
    created() {

    },
    components: {
        knowledgeTree,
        elementTable,
        knowledgeQuestion,
        selectDialogue
    }
}
</script>

<style lang="scss">
.replyDialog {
    height: 680px;
    .el-dialog__body {
        padding-bottom: 0;
        overflow-y: scroll;
    }
    .replyFlex {
        display: flex;
        .knowledgeTree {
            width: 260px;
            height: 460px;
            margin-right: 20px;
            flex-shrink: 0;
            background: #f5f7fa;
            .el-tree {
                padding: 10px 0 10px 10px;
                background: #f5f7fa;
                border-radius: 6px;
            }
        }
        .replayContent {
            width: calc(100% - 280px);
            .el-input--suffix > .el-input__suffix {
                top: 1px;
            }
            .icon-sousuo {
                font-size: 22px;
                color: #b7c1c9;
                margin-right: 8px;
                cursor: pointer;
                &:hover {
                    color: #abb4bc;
                }
            }
            .elementTable img {
                max-width: 200px;
            }
        }
    }
}
</style>